<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拼豆色卡工作室 - 移动 / 平板</title>
  <link rel="icon" type="image/png" sizes="16x16" href="../icon/pencil.png">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="./css/mobile-base.css">
  <link rel="stylesheet" href="./css/mobile-app-bar.css">
  <link rel="stylesheet" href="./css/mobile-rails.css">
  <link rel="stylesheet" href="./css/mobile-workspace.css">
  <link rel="stylesheet" href="./css/mobile-toolbar.css">
  <link rel="stylesheet" href="./css/mobile-drawers.css">
  <link rel="stylesheet" href="./css/mobile-palette.css">
  <link rel="stylesheet" href="./css/mobile-modal.css">
  <link rel="stylesheet" href="./css/mobile-display.css">
  <link rel="stylesheet" href="./css/mobile-responsive.css">
</head>

<body class="device-phone">
  <header class="app-bar">
    <div class="app-bar__actions">
      <button class="chip-button chip-import" type="button" data-sheet-target="import">
        <img src="../svg/导入.svg" alt="" aria-hidden="true">
        导入
      </button>
      <button class="chip-button" type="button" data-sheet-target="export">
        <img src="../svg/导出.svg" alt="" aria-hidden="true">
        导出
      </button>
      <button class="chip-button" type="button" data-sheet-target="display">
        <img src="../svg/显示设置.svg" alt="" aria-hidden="true">
        显示设置
      </button>
      <input id="importFileInput" type="file" accept=".pd,.json,.png,.jpg,.jpeg" hidden>
      <div id="displayModeToast" class="display-mode-toast" role="status" aria-live="polite" aria-hidden="true">光效：标准白昼
      </div>
    </div>
  </header>

  <main class="workspace-frame">
    <aside class="rail rail-left" id="primaryDock" aria-label="工作区工具栏">
      <div class="rail__buttons">
        <button class="rail-button" type="button" data-drawer-target="canvas-settings">
          <img src="../svg/画布设置.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-drawer-target="base-settings">
          <img src="../svg/底图设置.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-drawer-target="reference-window">
          <img src="../svg/参考图窗.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-sheet-target="import">
          <img src="../svg/导入.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-sheet-target="export">
          <img src="../svg/导出.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-sheet-target="display">
          <img src="../svg/显示设置.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-sheet-target="manual">
          <img src="../svg/使用手册.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-drawer-target="image-operations">
          <img src="../svg/图像操作.svg" alt="">
        </button>
      </div>
    </aside>

    <!-- 图层 -->
    <main class="workspace" role="main">
      <div id="canvasWrapper" class="canvas-wrapper">
        <div id="canvasStage" class="canvas-stage">
          <div id="canvasViewport" class="canvas-viewport">
            <canvas id="baseCanvas"></canvas>
            <canvas id="drawingCanvas"></canvas>
            <canvas id="selectionMaskCanvas" aria-hidden="true"></canvas>
            <canvas id="selectionContentCanvas" aria-hidden="true"></canvas>
            <canvas id="gridCanvas" aria-hidden="true"></canvas>
            <canvas id="selectionOutlineCanvas" aria-hidden="true"></canvas>
          </div>
        </div>
      </div>
    </main>

    <aside class="rail rail-right" id="secondaryDock" aria-label="绘制工具栏">
      <div class="rail__buttons">
        <button class="rail-button is-active" type="button" data-tool="pencil" aria-label="画笔">
          <img src="../svg/画笔.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-tool="bucket" aria-label="油漆桶">
          <img src="../svg/油漆桶.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-tool="eyedropper" aria-label="吸管">
          <img src="../svg/吸管.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-tool="eraser" aria-label="橡皮">
          <img src="../svg/橡皮.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-tool="selection" aria-label="选区">
          <img src="../svg/选区.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-toggle="palette" aria-label="调色板">
          <img src="../svg/调色盘.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-drawer-target="palette-management" aria-label="色卡管理">
          <img src="../svg/色卡选择.svg" alt="">
        </button>
        <button class="rail-button" type="button" data-drawer-target="color-management" aria-label="颜色管理">
          <img src="../svg/颜色管理.svg" alt="">
        </button>
      </div>
    </aside>
  </main>

  <footer class="mobile-toolbar" aria-label="移动端底部工具栏">
    <button class="mobile-tool is-active" type="button" data-tool="pencil">
      <img src="../svg/画笔.svg" alt="">
    </button>
    <button class="mobile-tool" type="button" data-tool="bucket">
      <img src="../svg/油漆桶.svg" alt="">
    </button>
    <button class="mobile-tool" type="button" data-tool="eyedropper">
      <img src="../svg/吸管.svg" alt="">
    </button>
    <button class="mobile-tool" type="button" data-tool="eraser">
      <img src="../svg/橡皮.svg" alt="">
    </button>
    <button class="mobile-tool" type="button" data-toggle="palette">
      <img src="../svg/调色盘.svg" alt="">
    </button>
    <button class="mobile-tool" type="button" data-drawer-target="mobile-menu">
      <img src="../svg/菜单.svg" alt="">
    </button>
  </footer>

  <aside class="drawer" data-drawer="mobile-menu" aria-label="功能菜单">
    <div class="drawer__header">
      <span class="drawer__title">全部功能</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body drawer__body--grid">
      <button class="drawer__item is-active" type="button" data-tool="pencil" aria-label="画笔">
        <img src="../svg/画布设置.svg" alt="">
        <div>
          <div class="drawer__item-title">新建画布</div>
        </div>
      </button>
      <button class="drawer__item is-active" type="button" data-tool="pencil" aria-label="画笔">
        <img src="../svg/画笔.svg" alt="">
        <div>
          <div class="drawer__item-title">画笔</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-tool="bucket" aria-label="油漆桶">
        <img src="../svg/油漆桶.svg" alt="">
        <div>
          <div class="drawer__item-title">油漆桶</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-tool="eyedropper" aria-label="吸管">
        <img src="../svg/吸管.svg" alt="">
        <div>
          <div class="drawer__item-title">吸管</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-tool="eraser" aria-label="橡皮">
        <img src="../svg/橡皮.svg" alt="">
        <div>
          <div class="drawer__item-title">橡皮</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-tool="selection" aria-label="选区">
        <img src="../svg/选区.svg" alt="">
        <div>
          <div class="drawer__item-title">选区</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-toggle="palette" aria-label="调色板">
        <img src="../svg/调色盘.svg" alt="">
        <div>
          <div class="drawer__item-title">调色板</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-drawer-target="reference-window">
        <img src="../svg/参考图窗.svg" alt="">
        <div>
          <div class="drawer__item-title">参考图窗</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-drawer-target="base-settings">
        <img src="../svg/底图设置.svg" alt="">
        <div>
          <div class="drawer__item-title">底图设置</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-drawer-target="palette-management">
        <img src="../svg/色卡选择.svg" alt="">
        <div>
          <div class="drawer__item-title">色卡管理</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-drawer-target="color-management">
        <img src="../svg/颜色管理.svg" alt="">
        <div>
          <div class="drawer__item-title">颜色管理</div>
        </div>
      </button>
      <button class="drawer__item" type="button" data-sheet-target="manual">
        <img src="../svg/使用手册.svg" alt="">
        <div>
          <div class="drawer__item-title">说明书</div>
        </div>
      </button>
    </div>
  </aside>

  <aside class="drawer" data-drawer="image-operations">
    <div class="drawer__header">
      <span class="drawer__title">图像操作</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body drawer__body--grid">
      <p>图像旋转</p>
      <div class="drawer__item">
        <img src="../svg/水平翻转.svg" alt="">
        <span>水平翻转</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/垂直翻转.svg" alt="">
        <span>垂直翻转</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/顺时针旋转.svg" alt="">
        <span>顺时针旋转</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/逆时针旋转.svg" alt="">
        <span>逆时针旋转</span>
      </div>
      <p>对称绘制</p>
      <div class="drawer__item">
        <img src="../svg/中心对称.svg" alt="">
        <span>中心对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/垂直对称.svg" alt="">
        <span>纵向对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/水平对称.svg" alt="">
        <span>水平对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/水平对称.svg" alt="">
        <span>45° 对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/水平对称.svg" alt="">
        <span>135° 对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/十字对称.svg" alt="">
        <span>纵向+水平对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/斜十字对称.svg" alt="">
        <span>45°+135°对称</span>
      </div>
      <div class="drawer__item">
        <img src="../svg/八向对称.svg" alt="">
        <span>八向对称</span>
      </div>
    </div>
  </aside>

  <aside class="drawer" data-drawer="palette-management">
    <div class="drawer__header">
      <span class="drawer__title">色卡管理</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body">
      <div class="drawer__item">加载内置色卡</div>
      <div class="drawer__item">导入色卡文件</div>
      <div class="drawer__item">删除当前色卡</div>
      <div class="drawer__item">制作新色卡</div>
    </div>
  </aside>

  <aside class="drawer" data-drawer="color-management">
    <div class="drawer__header">
      <span class="drawer__title">颜色管理</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body">
      <div class="drawer__item">颜色启用 / 禁用</div>
      <div class="drawer__item">颜色高亮定位</div>
      <div class="drawer__item">颜色替换</div>
    </div>
  </aside>

  <aside class="drawer" data-drawer="reference-window">
    <div class="drawer__header">
      <span class="drawer__title">参考图窗</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body">
      <div class="drawer__item">添加参考图</div>
      <div class="drawer__item">管理参考图</div>
      <div class="drawer__item">参考图显示方式</div>
    </div>
  </aside>

  <aside class="drawer" data-drawer="base-settings">
    <div class="drawer__header">
      <span class="drawer__title">底图设置</span>
      <button class="close-btn" type="button" aria-label="关闭" data-close-drawer>×</button>
    </div>
    <div class="drawer__body">
      <div class="drawer__item">导入底图</div>
      <div class="drawer__item">移除底图</div>
      <div class="drawer__item">底图缩放与对齐</div>
      <div class="drawer__item">贴合画布 / 居中</div>
      <div class="drawer__item">底图模式与透明度</div>
    </div>
  </aside>

  <!-- 显示设置 -->
  <div class="sheet-overlay" id="sheetOverlay">
    <section class="sheet" data-sheet="display" hidden>
      <header class="sheet__header">
        <span class="sheet__title">????</span>
        <button class="close-btn" type="button" aria-label="??" data-close-sheet>?</button>
      </header>
      <div class="tool-panel__body">
        <p class="panel-description">???????????????????????????</p>
        <label class="inline-control">
          <input type="checkbox" id="autoSnapToggle">
          <span>????????</span>
        </label>
        <label class="inline-control">
          <input type="checkbox" id="showCodesToggle">
          <span>????</span>
        </label>

        <section class="display-options-group" aria-labelledby="displayModeGroupLabel">
          <p id="displayModeGroupLabel" class="display-options__title">????</p>
          <div class="display-options__tabs display-options__tabs--grid-2x2" role="radiogroup" aria-label="??????">
            <label class="display-tab">
              <input type="radio" name="canvasDisplayMode" value="standard" id="displayModeStandard" checked>
              <span>??/??</span>
            </label>
            <label class="display-tab">
              <input type="radio" name="canvasDisplayMode" value="night" id="displayModeNight">
              <span>????</span>
            </label>
            <label class="display-tab">
              <input type="radio" name="canvasDisplayMode" value="temperature" id="displayModeTemperature">
              <span>????</span>
            </label>
            <label class="display-tab">
              <input type="radio" name="canvasDisplayMode" value="light" id="displayModeLight">
              <span>????</span>
            </label>
            <label class="display-tab">
              <input type="radio" name="canvasDisplayMode" value="special" id="displayModeSpecial">
              <span>?????</span>
            </label>
          </div>
          <p class="display-options__hint">????????/??????????????????</p>
        </section>

        <section class="display-options-group" aria-labelledby="pixelShapeGroupLabel">
          <p id="pixelShapeGroupLabel" class="display-options__title">????</p>
          <div class="display-options__tabs display-options__tabs--pill" role="radiogroup" aria-label="????">
            <label class="display-tab">
              <input type="radio" name="pixelShape" value="square" id="pixelShapeSquare" checked>
              <span>????</span>
            </label>
            <label class="display-tab">
              <input type="radio" name="pixelShape" value="circle" id="pixelShapeCircle">
              <span>???</span>
            </label>
          </div>
        </section>

        <label class="inline-control inline-control--with-value zoom-control">
          <span>????</span>
          <div class="inline-control__range">
            <input type="range" id="zoomRange" min="5" max="40" step="1" value="10">
            <span class="inline-value" id="zoomRangeValue">100%</span>
          </div>
        </label>
        <label class="inline-control inline-control--with-value">
          <span>?????</span>
          <div class="inline-control__range">
            <input type="range" id="canvasOpacityRange" min="0" max="100" step="1" value="90">
            <span class="inline-value" id="canvasOpacityValue">90%</span>
          </div>
        </label>

        <label class="inline-control inline-control--with-value">
          <span>??????</span>
          <div class="inline-control__range">
            <input type="range" id="axisOpacityRange" min="0" max="100" step="5" value="100">
            <span class="inline-value" id="axisOpacityValue">100%</span>
          </div>
        </label>
        <div class="grid-settings axis-settings" aria-live="polite">
          <p class="grid-settings__eyebrow">???????</p>
          <p class="grid-settings__description">?????????????????/???????</p>
          <div class="grid-accordion axis-settings__accordion" data-grid-section="x">
            <button class="grid-accordion__header" type="button" aria-expanded="false">
              <span class="grid-settings__group-title">X ?</span>
              <span class="grid-accordion__chevron" aria-hidden="true"></span>
            </button>
            <div class="grid-accordion__content" data-grid-content="x" hidden>
              <label class="inline-control">
                <input type="checkbox" id="gridBoldXToggle">
                <span>????</span>
              </label>
              <label class="inline-control inline-control--with-value">
                <span>????</span>
                <input type="number" id="gridBoldXInterval" min="1" max="512" value="5">
              </label>
              <label class="inline-control inline-control--with-value">
                <span>????</span>
                <select id="gridXStart">
                  <option value="center">?????????</option>
                  <option value="ltr">????</option>
                  <option value="rtl">????</option>
                </select>
              </label>
            </div>
          </div>
          <div class="grid-accordion axis-settings__accordion" data-grid-section="y">
            <button class="grid-accordion__header" type="button" aria-expanded="false">
              <span class="grid-settings__group-title">Y ?</span>
              <span class="grid-accordion__chevron" aria-hidden="true"></span>
            </button>
            <div class="grid-accordion__content" data-grid-content="y" hidden>
              <label class="inline-control">
                <input type="checkbox" id="gridBoldYToggle">
                <span>????</span>
              </label>
              <label class="inline-control inline-control--with-value">
                <span>????</span>
                <input type="number" id="gridBoldYInterval" min="1" max="512" value="5">
              </label>
              <label class="inline-control inline-control--with-value">
                <span>????</span>
                <select id="gridYStart">
                  <option value="center">?????????</option>
                  <option value="ttb">????</option>
                  <option value="btt">????</option>
                </select>
              </label>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>

  <!-- ??? -->
  <aside class="palette-window" id="paletteWindow">
    <div class="drawer__header">
      <span class="drawer__title">???</span>
      <button class="close-btn" type="button" aria-label="??" data-close-palette>?</button>
    </div>
    <div class="palette-window__body">
      <input type="search" placeholder="????..." aria-label="????" class="palette-search">
      <div class="palette-grid">
        <div class="color-swatch" style="background: #1f6feb;">A1</div>
        <div class="color-swatch" style="background: #0d5adf;">B2</div>
        <div class="color-swatch" style="background: #5c89ff;">C3</div>
        <div class="color-swatch" style="background: #87b6ff;">D4</div>
        <div class="color-swatch" style="background: #a4e2ff;">E5</div>
        <div class="color-swatch" style="background: #9d4edd;">F6</div>
        <div class="color-swatch" style="background: #f19945;">G7</div>
        <div class="color-swatch" style="background: #16a085;">H8</div>
      </div>
    </div>
  </aside>

  <!-- ???? -->
  <div id="exportWindow" class="modal-window modal-window--wide" aria-hidden="true" tabindex="-1"
    data-shortcuts-ignore="true">
    <div class="modal-window__dialog export-window__dialog">
      <header class="modal-window__header export-modal-window__header">
        <div class="export-tabs">
          <button type="button" class="export-tab is-active" data-export-tab="overview">??</button>
          <button type="button" class="export-tab" data-export-tab="pixel">??</button>
          <button type="button" class="export-tab" data-export-tab="highlight">??</button>
        </div>
      </header>
      <div class="modal-window__body export-window__body">
        <div class="export-sections" data-export-sections>
          <section class="export-section is-active" data-export-section="overview">
            <p class="export-card__title">????</p>
            <div class="export-preview-box"></div>
            <p class="export-card__hint">???????????????????????</p>
          </section>
          <section class="export-section" data-export-section="pixel">
            <p class="export-card__title">?????</p>
            <p class="export-card__hint">???????PNG / JPG / PD?????????????</p>
          </section>
          <section class="export-section" data-export-section="highlight">
            <p class="export-card__title">????</p>
            <p class="export-card__hint">?????????????????????</p>
          </section>
        </div>
      </div>
      <footer class="modal-window__footer export-modal-window__footer">
        <button id="exportCancelBtn" type="button" class="ghost-button">??</button>
        <button id="exportConfirmBtn" type="button" class="primary-button">????</button>
      </footer>
    </div>
  </div>

  <script src="./js/mobile.js"></script>
</body>

</html>
